<template>
  <div class="abnormal">
    <div class="abnormal-content">
      <div class="abnormal-title">每日快报/异常快报</div>
      <h2 class="abnormal-h2">2020年5月22日异常快报</h2>
      <div v-if="listdata!=[]" id="Echarts" :style="{width: '590px', height: '300px'}"></div>
      <div class="abnormal-table">
        <el-table
          :data="tableData"
          border
          style="width: 90%"
          :header-cell-style="{background:'#5058b1',color:'#fff'}"
        >
          <el-table-column type="index" label="#" width="180"></el-table-column>
          <el-table-column prop="department" label="部门" width="180"></el-table-column>
          <el-table-column prop="symptom" label="状况" width="180"></el-table-column>
          <el-table-column prop="names" label="名单"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../assets/js/api";
export default {
  data() {
    return {
      tableData: [],
      listdata:[]
    };
  },
  mounted() {
    // this.drawtab();
    this.tablelist();
    this.symptom();
  },
  methods: {
    drawtab() {
      let Echarts = this.$echarts.init(document.getElementById("Echarts"));
      Echarts.setOption({
        xAxis: {
          type: "category",
          data: [this.listdata[0].symptom,this.listdata[1].symptom,this.listdata[2].symptom,this.listdata[3].symptom]
        },
        yAxis: {
          type: "value",
           max:150,
           min:0
        },
          tooltip: {
          //鼠标滑过时显示坐标轴信息
          trigger: "axis",
        },
        series: [
          {
            data: [this.listdata[0].count,this.listdata[1].count,this.listdata[2].count,this.listdata[3].count],
            type: "bar",
            barWidth:50,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            }
          }
        ]
      });
    },
    tablelist() {
      this.$http({
        url: Api.exception,
        method: "GET"
      }).then(res => {
        this.tableData = res.data.list;
      });
    },
    symptom() {
      this.$http({
        url: Api.symptom,
        method: "GET"
      }).then(res => {
        // console.log(res);
        this.listdata=res.data.list
        //  this.$nextTick(
            this.drawtab()
        //  )
        //  count 数量  symptom 状态
      });
    }
  }
};
</script>
<style  scoped>
.abnormal {
  padding: 30px;
  box-sizing: border-box;
}
.abnormal-content {
  background-color: #fff;
  border-radius: 12px;
}
.abnormal-title {
  height: 55px;
  line-height: 55px;
  font-size: 16px;
  color: #9ca1b9;
  text-indent: 30px;
  border-bottom: 1px solid #ececff;
}
.abnormal-h2 {
  font-size: 20px;
  color: #5c6297;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
}
#Echarts {
  margin-left: 250px;
}
.abnormal-table {
  margin-left: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}
</style>